<template>
	<div class="index">
		<header class="header">
			<!-- <Search></Search> -->
		</header>
		<article class="container">
		
			<div class="center">
				<div class="inner">
						
					<div class="content"><router-view name="content"></router-view></div>
					<div class="footer"><router-view name="footer"></router-view></div>
				</div>
			</div>
			<div class="left">
				<div class="left-content"><router-view name="left"></router-view></div>
			</div>
			<div class="right">
				<div class="right-content">
					<router-view name="right"></router-view>
				</div>
			</div>
		</article>

		<CatBox  class="cat-box" v-show="showCat"></CatBox>
		
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import CatBox from '@/components/other/CatBox.vue';
export default {
	name: 'Index',
	components: {
		CatBox
	},
	computed: {
		...mapGetters({
			showCat: 'base/showCat'
		})
	}
};
</script>

<style lang="stylus">
.header
	width 100%
	height 80px
	display flex
	align-items center
/* 双飞翼布局 */
wing-left = 200px
wing-right = 280px
content-max-width = 1250px
content-min-width = 1080px
.container
	min-width content-min-width
	max-width content-max-width
	margin 0 auto
.left
	float left
	width wing-left
	margin-left -100%
	position relative
	.left-content
		position fixed
		top 80px
		width wing-left
.center
	float left
	width 100%
.center .inner
	margin 0 wing-right 0 wing-left
	padding 0 20px
.right
	float left
	width wing-right
	margin-left -(wing-right)
	z-index 100
	position relative
	.right-content
		position fixed
		top 80px
		max-width wing-right
.cat-box
	position fixed
	left 0
	bottom 10px
	opacity .8
</style>
